<template>
  <div>
    <!-- 需求：点击按钮 实现p标签 显示/隐藏动态切换 
    v-show="变量/表达式"
    v-if="变量/表达式">
    -->
    <!-- v-show -->
    <!-- 变量/表达式 为 false时 隐藏dom元素 -->
    <!-- 变量/表达式 为 true时 显示dom元素 -->

    <!-- 变量/表达式 为 false时 dom元素存在的  通过display：none -->
    <!-- 变量/表达式 为 true时 dom元素也存在 移除display：none -->

    <p v-show="isShow">我是v-show指令</p>
    <button @click="isShow = !isShow">click me show</button>
    <br />

      <!-- v-if -->
    <!-- 变量/表达式 为 false时 隐藏dom元素 -->
    <!-- 变量/表达式 为 true时 显示dom元素 -->

    <!-- 变量/表达式 为 false时 dom元素不存在 -->
    <!-- 变量/表达式 为 true时 dom元素存在 直接生成// 节点直接删除/生成 -->

    <p v-if="isIf">我是v-if指令</p>
    <button @click="isIf = !isIf">click me if</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      isIf: false,
    };
  },
};
</script>